<template>
    <div>
        <van-nav-bar title="充电订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="待付款" name="0"></van-tab>
        <van-tab title="待评论" name="1"></van-tab>
        <van-tab title="退款/售后" name="2"></van-tab>
    </van-tabs>
    <div v-for="chargingOrder in chargingOrderList" :key="chargingOrder.id" v-show="chargingOrderDivShow">
        <van-card desc="描述信息" :title=chargingOrder.stationName
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
            <template #tags>
                <br>
                <van-tag plain type="primary">{{ chargingOrder.gunNo }}</van-tag><br>
                <van-tag plain type="primary">订单编号： {{ chargingOrder.orderNo }}</van-tag><br>
                <van-tag plain type="primary">充电时间： {{ chargingOrder.chargingTime }}</van-tag>
            </template>
            <template #footer>
                <van-tag plain type="primary">应付款： {{ chargingOrder.amount }}</van-tag>
            </template>
        </van-card>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const onClickLeft = () => history.back();
const chargingOrderDivShow = ref(true);

const chargingOrderList = ref([
    {
        id: 10001,
        stationName: '天河体育西共享22KW',
        gunNo: '1号枪',
        orderNo: '1110001',
        amount: '99.99',
        chargingTime: '2022年4月15日 20:15:11'
    }, {
        id: 10002,
        stationName: '天河体育西共享22KW',
        gunNo: '2号枪',
        orderNo: '1110002',
        amount: '88.99',
        chargingTime: '2022年4月16日 21:11:32'
    }]);

const onClickTab = ({ name }) => getUserCouponInf(name);

function getUserCouponInf(data) {
    console.info(data)
    chargingOrderDivShow.value = true;
}
</script>